<template>
    <div>
        <!--文章模块-头部-->
        <div class="row article-header">
            <div class="col-md-2">
                <span style="font-size: large" class="glyphicon glyphicon-th-list">最新博文</span>
            </div>
            <div class="col-md-1 col-md-offset-9">
                <p class="text-right more"><a href="/pBlog/all">更多</a></p>
            </div>
        </div>

        <!--文章模块-内容-->
        <div class="row article-content">
            <div class="col-md-6" v-for="(a,index) in articleList" :key="index">
                <div>
                    <p class="article-title"><a href="#">{{a.title}}</a></p>
                    <p class="article-content">{{a.summary}}</p>
                    <p class="article-review"><span>{{a.catalogName}}</span><span>{{a.createTime}}</span> <span
                            class="num"><span class="glyphicon glyphicon-eye-open"></span>{{a.browseNumber}}</span></p>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        name: "TopicSubject",
        data() {
            return {
                articleList: [
                    {
                        title: 'Vue的生命周期',
                        summary: '介绍vue组件的生命周期',
                        catalogName: '前端',
                        createTime: '2021-09-10 14:22:56',
                        browseNumber: 0
                    },
                    {
                        title: 'Vue的生命周期',
                        summary: '介绍vue组件的生命周期',
                        catalogName: '前端',
                        createTime: '2021-09-10 14:22:56',
                        browseNumber: 0
                    },
                    {
                        title: 'Vue的生命周期',
                        summary: '介绍vue组件的生命周期',
                        catalogName: '前端',
                        createTime: '2021-09-10 14:22:56',
                        browseNumber: 0
                    },
                    {
                        title: 'Vue的生命周期',
                        summary: '介绍vue组件的生命周期',
                        catalogName: '前端',
                        createTime: '2021-09-10 14:22:56',
                        browseNumber: 0
                    }

                ],
                num: 4
            }
        },
        mounted() {

        }

    }
</script>

<style scoped>

</style>